<template>
	<view class="container">
		<u-navbar :isBack="true" title="订单详情" title-color="#101010"></u-navbar>

		<view view class="downBox">
			<!-- <view class="order-map">
				<view class="order-map-control">
					<map style="width: 100vw; height: 100%;"  :longitude="orderDetail.location_longitude" :latitude="orderDetail.location_latitude" scale='14' :markers="marker" :polyline="polygon" enable-building="true">
						<cover-view slot="callout">
							 <block v-for="(item, index) in marker" :key="index">
								<cover-view :marker-id="item.id" v-if="item.id != 0" class="customCallout" style="display: flex; flex-direction: column; align-items: center; height: 160rpx;">
									<cover-view style="background-color: #FFF; border-radius: 20rpx; padding: 10rpx; color: #000; font-size: 22rpx; text-align: center; box-shadow: 1px 1px 1px 1px rgba(0,0,0,.3);">
										距服务目的地{{item.distance}}km
									</cover-view>
									<cover-image style="width: 120rpx; height: 120rpx; margin-top: 0rpx;" :src="markerPointBack" />
									<cover-image style="width: 74rpx; height: 74rpx; margin-top: 0rpx; border-radius: 50%; margin-top: -110rpx;" :src="item.thumbImg" />
								</cover-view>
								<cover-view :marker-id="item.id" v-if="item.id == 0" style="display: flex; flex-direction: column; align-items: center;">
									<cover-view style="width: 40rpx; height: 40rpx; border-radius: 50%; background-color: #fe7403; font-size: 26rpx; color: #FFF; text-align: center; vertical-align: center; padding: 10rpx;">6666666666666666</cover-view>
									<cover-view style="width: 5rpx; height: 40rpx; background-color: #fe7403;"></cover-view>
								</cover-view>
							</block> 
						</cover-view>
					</map>
				</view>
			</view> -->

			<!-- 订单状态 -->
			<view class="order-map-container">
				<view class="order-main">
					<view
						style="display: flex; flex-direction: row; font-size: 36rpx; font-weight: bold; padding: 20rpx 30rpx;">
						<text style="flex: 1;">{{orderDetail.order_status_text}}</text>
						<text style="color: #0CB1F0;">服务码 #{{orderDetail.com_code}}#</text>
					</view>
					<view style="margin-top: 0rpx;color: #666666;font-size: 28rpx;padding-left: 30rpx;" class=""
						v-if="orderDetail.order_status == 1">
						师傅正在全力接单中，请耐心等待
					</view>
					<view style="margin-top: 0rpx;" class="order-main-toptips" v-if="orderDetail.order_status == 2">
						<!-- v-if="isMasterApproching && orderDetail.mechanics.length > 0"> -->
						师傅正在赶往您的位置，预计<text>{{ 60 }}分钟</text>内到达
					</view>
					<view style="margin-top: 0rpx;" class="order-main-toptips" v-if="ismasterServicing">
						师傅正在<text>服务中</text>，请注意服务过程相关细节
					</view>
				</view>
				<view style="display: flex; flex-direction: row; padding: 30rpx 30rpx;">
					<!-- <image style="width: 200rpx; height: 150rpx;" :src="orderStatusProgImg_1"></image> -->
					<!-- <image style="width: 200rpx; height: 150rpx;" :src="orderStatusProgImg_2"></image> -->
					<!-- <image style="width: 200rpx; height: 150rpx;" :src="orderStatusProgImg_3"></image> -->
					<!-- <image style="width: 200rpx; height: 150rpx;" :src="orderStatusProgImg_4"></image> -->
				</view>
			</view>

			<!-- 服务地址 -->
			<view class="orderListBox" style="background-color: #fff;">
				<view class="order-main-content" style="margin-top: 20rpx; padding: 0 30rpx;">
					<view class="dot-black"></view>
					<view class="order-main-content-item">
						<view class="title">{{orderDetail.craft_name}} ({{distance}}km)</view>
						<view class="contacts" v-if="orderDetail.mechanics.length > 0">
							<view class="contacts-text-item">{{ orderDetail.mechanics[0].name }}</view>
							<view class="contacts-medal">{{ orderDetail.craft_name }}</view>
							<view class="contacts-text-item">{{ orderDetail.mechanics[0].mobile }}</view>
						</view>
					</view>
				</view>
				<view class="order-main-content" style="padding: 0 30rpx;">
					<view class="dot-green"></view>
					<view class="order-main-content-item">
						<view class="title">{{orderDetail.location_str}}</view>
						<view class="contacts">
							<view class="contacts-text-item">{{orderDetail.nickname}}</view>
							<view class="contacts-text-item">{{orderDetail.mobile}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="orderListBox" style="margin-top: 20rpx;">
				<view class="orderLists">
					<view class="order-maintitle"
						v-if="orderDetail.order_status=='0' && (hour != '00' || minutes != '00' || seconds != '00')">
						定金待付，剩余<text>{{ hour }}</text> 时<text>{{ minutes }}</text> 分<text>{{ seconds }}</text> 秒
					</view>
					<view class="order-maintitle"
						v-if="orderDetail.order_status=='0' && hour == '00' && minutes == '00' && seconds == '00'">
						定金待付
					</view>
					<view class="order-maintitle" v-if="orderDetail.order_status=='6'">
						尾款待付，请尽快完成支付
					</view>
					<view class="order-maintitle" v-if="orderDetail.order_status=='7'">
						服务已完成，感谢您的使用
					</view>
					<!-- <view v-if="isCodeVisible" style="border: 2rpx dashed #fe7403; background-color: antiquewhite; border-radius: 10rpx; display: flex; flex-direction: column; padding: 10rpx 20rpx; margin-top: 20rpx;">
            <text style="color: #666; font-size: 24rpx;">订单完成码</text>
            <text style="font-size: 50rpx; font-weight: bold; margin: 20rpx 0; text-align: center; color: #fe7403; letter-spacing: 10rpx;">{{orderDetail.com_code}}</text>
            <text style="color: #666; font-size: 24rpx">请在您验收工作成果后再将 订单完成码 告知师傅</text>
          </view> -->
					<view class="listBox" style="margin-top: 20rpx;">
						<text>需求工种</text>
						<text></text>
						<text>{{orderDetail.craft_name}}</text>
					</view>
					<view class="beizhuBox">
						<text>需求描述</text>
						<text>{{orderDetail.description}}</text>
						<view class="beizhuBox-imgs-group" v-for="(item, index) in actualDescImgs" :key="index">
							<image :src="item" @click="previewImg(item)" />
						</view>
					</view>
					<view class="listBox" style="margin-top: 20rpx; margin-bottom: 20rpx;">
						<text>需求备注</text>
						<text></text>
						<text>{{orderDetail.memo}}</text>
					</view>
				</view>
			</view>
			<view class="orderListBox" style="margin-top: 20rpx;">
				<view class="orderLists">
					<view class="listBox" style="margin-top: 20rpx;">
						<text>称呼</text>
						<text></text>
						<text>{{orderDetail.nickname}}</text>
					</view>
					<view class="listBox">
						<text>联系电话</text>
						<text></text>
						<text>{{orderDetail.mobile}}</text>
					</view>
					<view class="listBox">
						<text>服务地址</text>
						<text></text>
						<text style="text-align: right;">{{orderDetail.location_str}}</text>
					</view>
					<view class="listBox">
						<text>服务时间</text>
						<text></text>
						<text>{{orderDetail.starttime_text}}</text>
					</view>
					<view class="listBox">
						<text>定金金额</text>
						<text></text>
						<text>￥{{orderDetail.deposit}}</text>
					</view>
					<view class="listBox">
						<text>尾款金额</text>
						<text></text>
						<text>￥{{orderDetail.amount}}</text>
					</view>
					<view class="listBox">
						<text>优惠券</text>
						<text></text>
						<text style="color: #fe7403;">-￥{{orderDetail.coupon}}</text>
					</view>
					<view class="listBox">
						<text>合计</text>
						<text></text>
						<text style="color: #fe7403;">￥{{orderDetail.totalAmount}}</text>
					</view>
					<view class="listBox">
						<text>订单编号</text>
						<text></text>
						<text>{{orderDetail.order_sn}}</text>
						<text class="listBox-btn" @click="tryCopy(orderDetail.order_sn)">复制</text>
					</view>
					<view class="listBox">
						<text>创建时间</text>
						<text></text>
						<text>{{orderDetail.createtime_text}}</text>
					</view>
					<view class="listBox" style="margin-bottom: 40rpx;" v-if="orderDetail.paidtime != null">
						<text>付款时间</text>
						<text></text>
						<text>{{orderDetail.paidtime_text}}</text>
					</view>
					<view class="listBox" style="margin-bottom: 40rpx;" v-if="orderDetail.finishtime != null">
						<text>完成时间</text>
						<text></text>
						<text>{{orderDetail.finishtime_text}}</text>
					</view>
				</view>
			</view>
			<!-- <view class="masterListBox" style="margin-top: 20rpx;" v-if="isMasterListShow">
				<view class="masterListBox-Container" v-if="orderDetail.mechanics.length > 0">
					<view class="master-item" v-for="item in orderDetail.mechanics" :key="item.id">
						<image :src="item.thumb_image" />
						<text class="master-item-name">{{item.name}}</text>
						<text class="master-item-medal">{{orderDetail.craft_name}}</text>
						<text class="master-item-mobile">{{item.mobile}}</text>
					</view>
				</view>
			</view> -->
		</view>

		<!-- <u-popup v-model="unpricedShow" mode="center">
			<view style="width: 650rpx;">
				<image :src="unpricedImg" mode="widthFix" style="width: 100%;"></image>
			</view>
		</u-popup> -->
		<!-- 核销成功 -->
		<view class="pop" v-if="unpricedShow">
			<view class="pop_k" style="padding: 113prx 14rpx 0 14rpx;">
				<image :src="unpricedImg" mode="widthFix" style="width: 100%;position: relative;top: 0px;"></image>
				<view style="color: #FC7404;font-weight: bold;font-size: 52rpx;position: relative;
				top: -300px;left: 32rpx;">
					报价信息确认
				</view>
				<view style="color: #666666;position: relative;top: -285px;left: 20rpx;font-size: 32rpx;
				background: #fff;border-radius: 16rpx 16rpx 0 0;width: 560rpx;padding: 48rpx 32rpx;">
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view>服务商品</view>
						<view style="font-weight: bold;">{{orderDetail.description}}</view>
					</view>
					<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 32rpx;">
						<view>预约金金额</view>
						<view style="font-weight: bold;color: #FC7404;">￥{{orderDetail.deposit}}</view>
					</view>
					<view style="display: flex;align-items: center;justify-content: space-between;margin-top: 32rpx;">
						<view>报价金额</view>
						<view style="font-weight: bold;color: #FC7404;">￥{{orderDetail.amount}}</view>
					</view>
					<view style="background: #FB6000;color: #fff;font-weight: bold;margin-top: 48rpx;
					font-size: 32rpx;border-radius: 56rpx;padding: 20rpx;text-align: center;" @click="payOrder(orderDetail)">
						确定付款
					</view>
					<view style="margin-top: 32rpx;text-align: center;color: #666666;" @click="unpricedShow = false">
						暂不付款
					</view>
				</view>
				<image src="../../static/login/out.png" mode="widthFix" style="width: 24px;position: relative;top: -255px;
				left: 276rpx;height: 24px;" @click="unpricedShow = false"></image>
			</view>
		</view>


		<!-- #ifdef APP-PLUS -->
		<view style="height: 100rpx;"></view>
		<!-- #endif -->
		<view class="footer" v-if="isPayButtonShow || isDone">
			<view class="footer-Box">
				<view>合计：</view>
				<view class="footer-Box-Amount">￥{{orderDetail.totalAmount}}</view>

				<button class="fotter-Box-btn-primary" v-if="isPayButtonShow && orderDetail.order_status == 13"
					@click="payOfflineOrder(orderDetail)">线下付款</button>
				<button class="fotter-Box-btn-primary" v-if="isPayButtonShow && orderDetail.order_status == 13"
					@click="payOrder(orderDetail)">线上付款</button>
				<button class="fotter-Box-btn-primary" v-if="isPayButtonShow && orderDetail.order_status != 13"
					@click="payOrder(orderDetail)">立即付款</button>
				<button class="fotter-Box-btn-primary" v-if="isDone && orderDetail.order_status != 13"
					@click="acceptanceCheck(orderDetail)">完成服务</button>
			</view>
		</view>

	</view>
</template>

<!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=a70b49c39a96a01751f27a38197ae46c"></script> -->
<script>
	// import QQMapWX from "@/common/qqmap-wx-jssdk.js";
	// import { orderApi } from '@/common/user.js';
	// import { userApi } from '@/common/user.js';
	import configUrl from 'utils/config.js'
	export default {
		data() {
			return {
				qqMapControl: null,
				polygon: [],
				distance: 0,
				unpricedShow: false,
				unpricedImg: configUrl.appurlImg + '/app/unpriced.png',

				navStyle: { //顶部导航栏动态样式，其他页面传值
					bgColor: 'var(--my-backgroung-color)', //顶部导航栏动态背景色
					navColor: '#ffffff', //顶部导航栏初始化显示时的盒子文字颜色
					name: '订单详情', //顶部导航栏名称
					isPosition: 'fixed', //顶部导航栏第一盒子的显示状态
				},
				actualDescImgs: [],
				orderDetail: [],
				marker: [],
				isMapShow: false,
				isPayButtonShow: false,
				isMasterListShow: false,
				isMasterApproching: false,
				ismasterServicing: false,
				isDone: false,
				isCodeVisible: false,

				specOrderId: 0,

				masterArriveRemain: 0,

				// 订单目的地标点
				orderDestMarker: [],

				orderStatusProgImg_1: '/static/image-order-details/order_prog_1.jpg',
				orderStatusProgImg_2: '/static/image-order-details/order_prog_2.jpg',
				orderStatusProgImg_3: '/static/image-order-details/order_prog_3.jpg',
				orderStatusProgImg_4: '/static/image-order-details/order_prog_4.jpg',

				markerPointBack: configUrl.appurlImg + '/app/icon_masterpoint.png',
				// markerPoint: configUrl.appurlImg + '/app/icon_userpoint_back.png',
				// 定时获取师傅定位
				timerMasterPosition: 0,
				remaining_transaction_time: 0,
				timer: null

			}
		},
		onLoad(option) {

			this.specOrderId = option.order_id;
			this.getOrderInfo(option.order_id);
			// console.log(this.marker,'44444444444')

		},
		methods: {

			clearTimer() {
				clearInterval(this.timer);
				this.timer = null;
			},
			startTimer() {
				this.timer = setInterval(() => {
					if (this.remaining_transaction_time > 0) {
						this.remaining_transaction_time -= 1;
					} else {
						this.clearTimer();
					}
				}, 1000);
			},
			tryCopy(content) {
				uni.setClipboardData({
					data: content
				});
			},
			acceptanceCheck(item) {
				uni.navigateTo({
					url: "/pages/users/acceptanceCheck?orderId=" + item.id,
				});
			},
			//字符时间转时间戳
			strTimeToTimeStamps(strtime) {
				//时间转换
				var date = new Date(strtime);
				//获取时间戳
				var timeStamps = Date.parse(date);
				return timeStamps;
			},
			//时间戳转字符时间
			TimeStampsTostrTime(nTimeStamps) {
				//转毫秒
				var date = new Date(nTimeStamps * 1000);
				//返回数据
				var retData = {
					nYear: date.getFullYear(),
					nMonth: date.getMonth() + 1,
					nDay: date.getDate(),
					nHour: date.getHours(),
					nMinutes: date.getMinutes(),
					nSeconds: date.getSeconds()
				};
				return retData;
			},

			getNearBranch(l, s) {
				let _this = this;
				userApi.getNearBranch({
					longitude: l,
					latitude: s
				}).then((res) => {
					if (res.length > 0) {
						res.forEach(item => {
							let iconPath = configUrl.appurlImg + '/app/zjMarker.png';
							if (_this.orderDetail.branch_id > 0) {
								if (_this.orderDetail.branch_id == item.id) {
									iconPath = configUrl.appurlImg + '/app/isMarker.png';
								}
							}

							_this.marker.push({
								id: item.id,
								longitude: item.longitude,
								latitude: item.latitude,
								thumbImg: configUrl.appurlImg + item.thumbImg,
								distance: item.distance,
								width: 35,
								height: 40,
								title: "商家:" + item.title,
								iconPath: iconPath,
								label: { //marker 上的标签 label
									content: "商家:" + item.title, //自定义label内容
									color: "#fff",
									anchorX: -63,
									anchorY: -98, //这里偏移量只能要数字
									fontSize: "12px",
									bgColor: '#fe7403',
									padding: 8,
									borderWidth: 20
								},
								callout: {
									content: "距离" + item.distance + 'km',
									padding: 5,
									display: "ALWAYS" //常显
								}
							});
						});
						console.log(_this.marker, '44444444444============================================')
					}
				});
			},

			//获取订单详情
			getOrderInfo(oid) {
				let _this = this;
				request.getWithToken({
					url: '/order/orderDetails',
					data: {
						order_id: oid
					}
				}).then(res => {
					console.log(res)
					// this.filteredTags = [...res.data];
					// this.$refs.paging.complete(this.filteredTags);
				});
				return;
				orderApi.getUserOrderDetail({
					orderId: oid
				}).then((res) => {

					if (res.order_status == 2 && res.type == 3) {
						if (res.orderModules.isPayButtonShow) {
							this.unpricedShow = true;
						}
					}
					_this.actualDescImgs = [];
					res.descImgs.forEach(img => {
						_this.actualDescImgs.push(configUrl.appurlImg + img);
					});
					res.mechanics.forEach(master => {
						master.thumb_image = configUrl.appurlImg + master.thumb_image
					})
					_this.orderDetail = res;
					_this.isMapShow = res.orderModules.isMapShow;
					_this.isPayButtonShow = res.orderModules.canPay;
					_this.isMasterListShow = res.orderModules.isMasterListShow;
					_this.isMasterApproching = res.orderModules.isMasterApproching;
					_this.ismasterServicing = res.orderModules.ismasterServicing;
					_this.remaining_transaction_time = res.remaining_transaction_time;
					_this.isDone = res.orderModules.isDone;
					_this.isCodeVisible = res.orderModules.isCodeVisible;
					_this.masterArriveRemain = res.masterArriveTime;
					_this.orderStatusProgImg_3 = parseInt(res.order_status) >= 3 && parseInt(res.order_status) !=
						13 ? '/static/image-order-details/order_prog_3.jpg' :
						'/static/image-order-details/order_prog_3_wait.jpg';
					_this.orderStatusProgImg_4 = parseInt(res.order_status) >= 5 && parseInt(res.order_status) !=
						13 ? '/static/image-order-details/order_prog_4.jpg' :
						'/static/image-order-details/order_prog_4_wait.jpg';
					_this.orderDestMarker = {
						id: 0,
						longitude: res.location_longitude,
						latitude: res.location_latitude,
						width: 20,
						height: 30,
						title: "服务地点",
						iconPath: configUrl.appurlImg + "/app/yhMarker.png",
						callout: {
							content: "服务地点",
							display: 'ALWAYS'
						}
						// label:{ //marker 上的标签 label
						//   content: "商家:"+item.title, //自定义label内容
						//   color: "#fff",
						//   anchorX: -63,
						//   anchorY: -98, //这里偏移量只能要数字
						//   fontSize: "12px",
						//   bgColor:'#fe7403',
						//   padding:8,
						//   borderWidth:20
						// },
						// callout:{
						//   content:"距离"+item.distance+'KM',
						//   padding:5,
						//   display: "ALWAYS"//常显
						// }
					};
					// _this.marker = [];
					// _this.marker.push(_this.orderDestMarker);
					// if (res.mechanics.length > 0) {
					// 	res.mechanics.forEach(item => {
					// 		if (item.hasLocation) {
					// 			_this.marker.push({
					// 				id: item.id,
					// 				longitude: item.curLongitude,
					// 				latitude: item.curLatitude,
					// 				width: 0,
					// 				height: 0,
					// 				iconPath: configUrl.appurlImg + '/app/icon_empty.png',
					// 				thumbImg: configUrl.appurlImg + item.thumb_image,
					// 				customCallout : {
					// 					display: 'ALWAYS'
					// 				}
					// 			});
					// 		}
					// 	});
					// }

					if (res.order_status < 5 || res.order_status == 13) {
						_this.getNearBranch(res.location_longitude, res.location_latitude);
						_this.refreshMasterLocation();
						_this.timerMasterPosition = setInterval(function() {
							_this.refreshMasterLocation();
						}, 1000 * 60); // 每60秒刷新一次

						_this.clearTimer()
						_this.startTimer()
					} else {
						_this.marker = [];
						_this.marker.push(_this.orderDestMarker);
					}
				});



				console.log('marksssssss', this.marker)
			},
			refreshMasterLocation() {
				let _this = this;
				_this.polygon = [];
				let repolygon = [];
				userApi.getMasterPosition({
					orderId: _this.specOrderId
				}).then(res => {
					_this.marker = [];
					_this.getNearBranch(_this.orderDestMarker.longitude, _this.orderDestMarker.latitude);
					_this.marker.push(_this.orderDestMarker);
					console.log('marksslllllll', _this.orderDestMarker)
					let remain = 0;

					// repolygon.push({
					// 	longitude:_this.orderDestMarker.longitude,
					// 	latitude:_this.orderDestMarker.latitude,
					// });
					console.log('marksslllllll222', res)
					if (res.length > 0) {
						res.forEach(item => {
							if (remain == 0 || remain > item.distance) {
								remain = item.distance;
								// repolygon = item.polygon;
								for (let l = 0; l < item.line.length; l++) {
									repolygon.push({
										longitude: item.line[l].longitude,
										latitude: item.line[l].latitude,
									});
								}

							}

							_this.marker.push({
								id: item.id,
								longitude: item.longitude,
								latitude: item.latitude,
								thumbImg: configUrl.appurlImg + item.thumbImg,
								distance: item.distance,
								width: 60,
								height: 70,
								iconPath: configUrl.appurlImg + '/app/marker.png',
								// callout: {
								// 	content:"师傅:"+item.name,
								// 	display: 'ALWAYS'
								// }
								label: { //marker 上的标签 label
									content: "师傅:" + item.name, //自定义label内容
									color: "#fff",
									anchorX: -55 - (item.name.length * 3),
									anchorY: -128, //这里偏移量只能要数字
									fontSize: "12px",
									bgColor: '#fe7403',
									padding: 8,
									borderWidth: 20
								},
								callout: {
									content: "距离" + item.distance + 'km',
									padding: 5,
									Y: -28, //这里偏移量只能要数字
									display: "ALWAYS" //常显
								}
							});

						});
					}
					_this.masterArriveRemain = Math.ceil(remain / (18 / 60));
					_this.distance = remain;
					// _this.polygon = repolygon;

				});
				setTimeout(function() {
					_this.polygon.push({
						color: '#4BA9F5',
						width: 3,
						points: repolygon
					})
				}, 2000);

			},
			payOfflineOrder(item) {
				let self = this;
				orderApi.payOfflineOrder({
					orderId: self.specOrderId
				}).then(res => {
					self.getOrderInfo(self.specOrderId);
				});
			},
			payOrder(item) {
				console.log("pay order:", item.id);
				uni.navigateTo({
					url: "/pages/users/Payment?orderId=" + item.id,
				});
			},

			reload() {
				this.isShow = false;
				// 页面重载
				const pages = getCurrentPages()
				// 声明一个pages使用getCurrentPages方法
				const curPage = pages[pages.length - 1]
				// 声明一个当前页面
				curPage.onLoad(curPage.options) // 传入参数
				curPage.onShow()
				curPage.onReady()
				// 执行刷新
			},
			previewImg() {
				uni.previewImage({
					urls: this.actualDescImgs
				});
			},

		}
	}
</script>
<style>
	/* @import url('/static/css/style.css'); */
</style>
<style scoped>
	.container {
		height: 100vh;
	}

	.downBox {
		width: 100%;
		height: auto;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.order-map {
		width: 100%;
		height: auto;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.order-map-container {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.order-main {
		display: flex;
		flex-direction: column;

	}

	.order-main-content {
		display: flex;
		flex-direction: row;
		margin-bottom: 30rpx;

	}

	.order-main-content-item {
		flex: 1;
		flex-direction: column;
		margin-left: 25rpx;
	}

	.title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.contacts {
		display: flex;
		flex-direction: row;
		font-size: 24rpx;
		color: #999;
		line-height: 24rpx;
		align-items: baseline;
	}

	.contacts-text-item {
		margin-right: 10rpx;
	}

	.contacts-medal {
		color: #fb7601;
		background-color: #ffefe2;
		padding: 10rpx;
		border-radius: 10rpx;
		margin-right: 40rpx;
	}

	.dot-green {
		width: 15rpx;
		height: 15rpx;
		background-color: #16d692;
		border-radius: 50%;
		color: #16d692;
		align-self: center;
	}

	.dot-black {
		width: 15rpx;
		height: 15rpx;
		background-color: #000;
		border-radius: 50%;
		color: #000;
		align-self: center;
	}

	.order-main-toptips {
		font-size: 26rpx;
		background-color: #FFEDE1;
		color: #EE811D;
		padding: 20rpx 30rpx;
		width: 100vw;
	}

	.order-map-control {
		width: 100%;
		height: 40vh;
		background-color: #FFF;
		padding: 0;
	}

	.orderListBox {
		width: 100%;
		height: auto;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
	}

	.order-maintitle {
		font-weight: bold;
		font-size: 42rpx;
		margin-top: 50rpx;
	}

	.order-maintitle text {
		color: #fb7502;
		margin: 0 5rpx 0 5rpx;
	}

	.orderLists {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 0 40rpx 0 40rpx;
	}

	.masterListBox {
		width: 100%;
		height: auto;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
		margin-bottom: 120rpx;
	}

	.masterListBox-Container {
		width: 100%;
		height: auto;
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		padding: 40rpx 40rpx 40rpx 40rpx;
	}

	.master-item {
		display: flex;
		flex-direction: row;
		padding: 10rpx 0;
		align-items: center;

	}

	.master-item-name {
		font-size: 26rpx;
		margin: 0 20rpx 0 20rpx;
	}

	.master-item-medal {
		font-size: 22rpx;
		padding: 10rpx 10rpx;
		background-color: #ffefe2;
		color: #fe7403;
	}

	.master-item-mobile {
		flex: 1;
		font-size: 24rpx;
		color: #999;
		text-align: right;
	}

	.master-item image {
		width: 96rpx;
		height: 96rpx;
		border: 1rpx solid #999;
		border-radius: 50%;
	}


	.title image {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.beizhuBox {
		display: flex;
		font-size: 26rpx;
		align-items: baseline;
		flex-direction: column;
		color: #999;
		box-sizing: border-box;
	}

	.beizhuBox>text:first-of-type {
		padding-bottom: 0rpx;
	}

	.beizhuBox text:last-of-type {
		/* flex: 1; */
		text-align: left;
		color: #000;
		margin-top: 10rpx;
		white-space: normal;
		height: auto;
	}


	.beizhuBox picker {
		flex: 1;
		text-align: right;
		color: #999;
	}

	.beizhuBox-imgs-group {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		flex-wrap: wrap;
	}

	.beizhuBox-imgs-group>image {
		width: 25vw;
		height: 25vw;
		margin-right: 4vw;
		border-radius: 10rpx;
	}

	.masterListBox {}

	.listBox {
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26rpx;
		flex-grow: 1;
	}

	.listBox-btn {
		/* border: 0rpx solid #999; */
		border-left: 2rpx solid #8c8c8c;
		font-size: 24rpx;
		color: #fb7502;
		padding: 0 10rpx;
		margin-left: 10rpx;
		background-color: #FFF;
	}

	.listBox>text:nth-of-type(1) {
		font-size: 26rpx;
		color: #999;
	}

	.listBox>text:nth-of-type(2) {
		font-size: 26rpx;
		color: #999;
		flex-grow: 9;
	}

	.listBox>image {
		width: 38rpx;
		height: 38rpx;
		margin-right: 10rpx;
	}

	.footer {
		width: 100%;
		height: 120rpx;
		padding: 0rpx 0rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
	}

	.footer-Box {
		width: 100%;
		height: 120rpx;
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
		padding: 20rpx 40rpx 5rpx 40rpx;
		margin-bottom: 20rpx;
		flex-direction: row;
		align-items: baseline;
		font-size: 22rpx;
		color: #999;
	}

	.footer-Box-Amount {
		font-weight: bold;
		color: #fd7403;
		font-size: 34rpx;
		flex: 1;
	}

	.fotter-Box-btn-primary {
		font-size: 28rpx;
		vertical-align: bottom;
		background-color: #fd7501;
		color: #fff;
		padding: 0 40rpx;
		margin-left: 10rpx;
	}
</style>
<style lang="scss">
	.pop {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.78);
		z-index: 999;

		.pop_k {
			width: 630rpx;
			position: fixed;
			top: 12%;
			left: 10%;
			// margin-top: -186rpx;
			// margin-left: -300rpx;
			z-index: 9;
		}

		.popTitle {
			width: 100%;
			text-align: center;
			color: #ffffff;
			position: absolute;
			top: 50rpx;
		}

		.popCenter {
			width: 100%;
			text-align: center;
			color: #ffffff;
			margin-top: 150rpx;
			font-size: 40rpx;
		}

		.popBtn {
			width: 80%;
			text-align: center;
			position: absolute;
			bottom: 20rpx;
			left: 50%;
			margin-left: -40%;
			padding: 30rpx 0;
			border-top: 1px solid #53beae;
			color: #53beae;
		}
	}
</style>